<!-- 机构作业范围 -->
<template>
  <div
    class="organization-manage org log-list customer-list-box dashboard-container"
  >
    <div class="test">
      <!-- 左侧树形结构 -->
      <div class="log-list-left">
        <el-scrollbar style="width: 100%;margin-bottom:50px;height:100%;">
          <el-card
            class="box-card"
            shadow="never"
          >
            <div class="app-container">
              <el-tree
                ref="orgTree"
                style="font-size: 12px display: none;"
                :props="{ label: 'name' }"
                :check-strictly="true"
                :data="depts"
                :indent="22"
                highlight-current
                node-key="id"
                :default-expanded-keys="treeExpandData"
                :default-checked-keys="['1024985257948084801']"
                :expand-on-click-node="false"
                class="filter-tree customer-tree-box"
                @node-click="nodeClick"
              />
            </div>
          </el-card>
        </el-scrollbar>
      </div>
      <!-- 右侧结构树对应的内容 -->
      <div class="log-list-right">
        <el-card class="box-card">
          <div
            slot="header"
            class="clearfix"
            style="position: relative"
          >
            <span>作业范围</span>
            <template>
              <el-button
                v-if="shows"
                v-show="quanxian"
                style="float: right; padding: 3px 0;width:90px;height:36px; margin-right:40px;margin-top:12px;"
                type="warning"
                @click="showsBtn"
              >编辑</el-button>
              <el-button
                v-if="quanxian"
                v-show="!shows"
                type="button"
                plain
                style="  position: absolute; padding: 3px 0;width:90px;height:36px; right:40px;top:12px;"
                @click="showsCancell"
              >取消</el-button>
              <el-button
                v-if="quanxian"
                v-show="!shows"
                type="warning"
                style=" position: absolute;padding: 3px 0;width:90px;height:36px; right:140px;top:12px;"
                @click="showsOk"
              >提交</el-button>
            </template>
          </div>

          <div class="searchBox">
            <label for="">地区关键词：</label>
            <el-input
              v-model="area"
              placeholder="请输入地区关键词"
              style="width:198px"
              @input="q"
            ></el-input>
          </div>
          <div
            class="niu"
            style="position: relative"
          >
            <el-button
              v-if="!shows"
              v-show="draw"
              plain
              type="warning"
              style="width:90px;height:36px;margin-top:20px;padding: 3px 0;"
              onclick="polygon.enableEditing()"
              @click="drawBtn"
            >开始绘制</el-button>
            <el-button
              v-show="!draw"
              type="warning"
              style="width:90px;height:36px;margin-top:20px;padding: 3px 0;folat:left;margin-left:0;"
              @click="drawBtnOk"
            >完成绘制</el-button>
            <el-button
              v-show="!draw"
              type="button"
              plain
              style="width:90px;height:36px;margin-top:20px;padding: 3px 0;"
              @click="drawBtnDel"
            >删除围栏</el-button>
          </div>
          <div
            id="map"
            ref="map"
            style="margin: 22px 0px 0px 0px;margin-bottom:10px;"
          ></div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
import {
  agencyList,
  agencyScopelist,
  addAgencyScope,
  del
} from '@/api/institutions'
export default {
  data() {
    return {
      map: null,
      jin: null,
      wei: null,
      area: null,
      exerciseRoute: {
        initialPoint: null,
        destination: null
      },
      arr: null,
      dd: null,
      idd: null,
      p: [],
      tt: null,
      Polygon: null,
      quanxian: false,
      draw: true,
      shows: true,
      longitude: null,
      latitude: null,
      depts: null,
      treeExpandData: [], // 树形展开的数据
      treeExpandData2: [], // 树形默认展开的数据
      provincialCenterId: '', // 省级中心id
      provincialCenterId2: [] // 省级树形默认展开中心id
    }
  },
  created() {
    this.getSgencyList()
  },
  mounted() {
    // console.log('1');
    // this.nodeClick()
  },
  methods: {
    q() {
      // 创建地图实例
      var map = new BMap.Map('map')

      // 创建localsearch对象
      var localSearch = new BMap.LocalSearch(map, {
        renderOptions: { map: map }
      })

      // 搜索关键字
      localSearch.search(this.area)

      // 监听搜索完成事件
      localSearch.setSearchCompleteCallback(results => {
        // 遍历搜索结果
        for (var i = 0; i < results.getCurrentNumPois(); i++) {
          var poi = results.getPoi(i)
          this.jin = poi.point.lng
          this.wei = poi.point.lat
        }
      })

      var point = new BMap.Point(this.jin, this.wei)
      map.centerAndZoom(point, 11)
      // console.log(this.jin)
      // console.log(this.wei)
    },
    drawBtn() {
      if (this.arr.bid === null) {
        this.draw = false
        console.log('可以绘制地图')
        var e1
        var e2
        // var p = [] // 用来存储折线的点

        var doneDraw = true // 判断是否绘制折线结束
        console.log(this.map)
        this.map.addEventListener('click', e1 => {
          // 当鼠标单击时
          if (doneDraw) {
            // 判断是否绘制曲线完毕
            this.p.push(new BMap.Point(e1.point.lng, e1.point.lat)) // 存储曲线上每个点的经纬度
            if (this.Polygon) {
              this.Polygon.setPath(this.p)
            } // 如果曲线存在，则获取折线上的点
            else {
              this.Polygon = new BMap.Polygon(this.p, {
                strokeColor: 'red',
                fillColor: '#f9c39e',
                strokeStyle: 'dashed',
                strokeWeight: 2,
                strokeOpacity: 0.5
              })
            } // 如果折线不存在，就增加此点
            if (this.p.length >= 1) {
              this.Polygon.enableEditing()
              console.log(this.map)
              this.map.addOverlay(this.Polygon) // 绘制曲线
              this.tt = this.Polygon.getPath()
            } // 当折线上的点只有一个时，不绘制
          }
        })
        // map.addEventListener('dblclick', function (e2) { // 当鼠标双击时：结束绘制，并可以编辑曲线
        //   alert('绘制完成')
        //   doneDraw = false
        //   Polygon.enableEditing()
        // })
      } else {
        this.nodeClick()
        this.draw = false
        this.Polygon.enableEditing()
      }
    },
    async drawBtnOk() {
      this.draw = true
      this.Polygon.disableEditing()
      this.nodeClick()
    },
    async drawBtnDel() {
      await del(this.idd)
      this.p = []
      this.Polygon = null
      this.map.clearOverlays(this.Polygon)
      this.draw = true
      this.Polygon.disableEditing()
      this.idd = null
      this.$message.success('删除地图成功')
    },
    showsCancell() {
      this.shows = true
      this.draw = true
      this.Polygon.disableEditing()
    },
    async showsOk() {
      if (this.tt) {
        if (
          this.tt[0].lat !== this.tt[this.tt.length - 1].lat &&
          this.tt[0].lng !== this.tt[this.tt.length - 1].lng
        ) {
          this.tt.push(this.tt[0])
        }

        for (let i = 0; i < this.tt.length; i++) {
          // 修改name属性为firstName
          this.tt[i].latitude = this.tt[i].lat
          this.tt[i].longitude = this.tt[i].lng
        }
        console.log(this.tt)
        this.arr.polygon = this.tt
        this.arr.type = 1
        this.arr.bid = this.idd
        await addAgencyScope(this.arr)
      } else {
        const res = this.Polygon.getPath()
        console.log(this.Polygon.getPath())
        this.shows = true
        this.draw = true

        for (let i = 0; i < res.length; i++) {
          // 修改name属性为firstName
          res[i].latitude = res[i].lat
          delete res[i].lat
          res[i].longitude = res[i].lng
          delete res[i].lng
        }
        this.dd.polygon = res
        await addAgencyScope(this.dd)
      }
      // this.polygon.disableEditing()
      this.draw = true
      const { data } = await agencyScopelist(this.idd)
      this.dd = data.polygon
      console.log('傻逼')
      setTimeout(() => {
        this.arr.bid = null
      }, 1000)
      this.$message.success('地图绘制成功')
    },
    showsBtn() {
      this.shows = false
      setTimeout(() => {
        this.arr.bid = null
      }, 8000)
      // this.polygon.enableEditing()
    },
    // 获取树形结构默认展开节点
    getExpandData(provincialCenterId) {
      // 将传入的数据转换为数组
      const provincialCenterIdArr = provincialCenterId.split(',')
      // 循环数组，将数组中的数据添加到treeExpandData中
      provincialCenterIdArr.forEach(item => {
        this.treeExpandData.push(item)
      })
    },
    getExpandData2(provincialCenterId2) {
      // 将传入的数据添加到treeExpandData2中
      this.treeExpandData2 = [provincialCenterId2]
      const _this = this
      // 加入延时函数是因为需要等待页面数据加载完毕
      setTimeout(() => {
        _this.nodeClick(provincialCenterId2)
      }, 50)
    },
    async getSgencyList() {
      const { data } = await agencyList()
      this.depts = JSON.parse(data)
      this.provincialCenterId = this.depts[0].children[0].id // 默认展开第一个节点下的第一个节点
      this.provincialCenterId2 = this.depts[0].children[0].children[0]
      this.$nextTick(function() {
        this.$refs['orgTree'].setCurrentKey(
          this.depts[0].children[0].children[0].id
        )
      })
      this.getExpandData2(this.provincialCenterId2)
      this.getExpandData(this.provincialCenterId)
    },
    async nodeClick(row) {
      console.log(row)
      console.log('123')
      this.idd = row.id
      const { data } = await agencyScopelist(row.id)
      this.arr = data
      this.dd = data
      this.longitude = data.longitude
      this.latitude = data.latitude
      this.map = new BMap.Map('map')
      // 设置中心点
      var point = new BMap.Point(this.longitude, this.latitude)
      this.map.centerAndZoom(point, 11)
      // 滚轮滚动
      this.map.enableScrollWheelZoom(true)
      this.quanxian = true
      this.shows = true
      this.draw = true
      if (
        row.id === '1024985257948084801' ||
        row.id === '1024985129287809409' ||
        row.id === '1024980800111765185' ||
        row.id === '1024980833938827105' ||
        row.id === '1025108572721366561' ||
        row.id === '1025108643500246881' ||
        row.id === '1025108784911206497' ||
        row.id === '1025108696675633121' ||
        row.id === '1024993548853984385' ||
        row.id === '1024993422324415489' ||
        row.id === '1024981295454874273' ||
        row.id === '1024981239465110017' ||
        row.id === '1024771753995515873' ||
        row.id === '1024772301733870785' ||
        row.id === '1024772425923018049'
      ) {
        this.quanxian = true

        const str = this.dd.polygon.map(item => {
          return new BMap.Point(item.longitude, item.latitude)
        })
        this.Polygon = new BMap.Polygon(str, {
          strokeColor: 'red',
          fillColor: '#f9c39e',
          strokeStyle: 'dashed',
          strokeWeight: 2,
          strokeOpacity: 0.5
        }) // 创建折线
        this.map.centerAndZoom(point, 10)
        this.map.addOverlay(this.Polygon) // 增加折线
      } else {
        this.quanxian = false
        this.shows = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .log-list-left {
  overflow: hidden !important;
  box-sizing: border-box !important;
}
/deep/ .niu {
  width: 100% !important;
}
/deep/ .anchorBL {
  opacity: 0 !important;
}
/deep/ .searchBox {
  color: #20232a !important;

  font-size: 14px !important;
}
/deep/ .searchBox label {
  font-weight: 400 !important;
}
/deep/ .log-list-right .el-card__body {
  padding: 25px !important;
  padding-bottom: 40px !important;
  box-sizing: border-box !important;
}
/deep/ .el-card__header {
  padding: 0;
  background-color: #f8faff !important;
  height: 60px;
  padding-left: 25px;
}
.clearfix {
  height: 100%;
  line-height: 60px;
}

/deep/ .customer-tree-box {
  .el-tree-node {
    margin: 2px 0 !important;
    .is-focusable {
      position: relative;
      &::before {
        content: '';
        display: inline-block;
        position: absolute;
        left: 6px;
        // width: 1px;
        border-left: #e5e7ec solid 1px;
        height: calc(100% + 3px);
        // 将此类名的最后一项样式设置为none
        &:last-child {
          border-left: none !important;
        }
      }
      margin: 2px 0 !important;
      .el-tree-node {
        .el-tree-node__children {
          margin: 2px 0 !important;
          .el-tree-node {
            .el-tree-node__content {
              .el-tree-node__expand-icon {
                display: none;
              }
              .el-tree-node__label {
                margin-left: 0px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 131px;
              }
            }
          }
        }
      }
    }
  }
  .el-tree-node {
    .el-tree-node {
      .el-tree-node {
        position: relative;
        &::before {
          content: '';
          display: inline-block;
          position: absolute;
          left: 26px;
          // width: 1px;
          border-left: #e5e7ec solid 1px;
          height: calc(100% + 3px);
        }
        // 将此类名的最后一项样式设置为none
      }
    }
  }
}
</style>
<style lang="scss" scoped>
/deep/ .BMap_mask {
  padding-bottom: 15px !important;
}
/deep/ #map {
  width: 100% !important;
  min-height: 680px !important;
}
.organization-manage {
  // overflow-x: scroll;
  min-height: 870px;
  padding-top: 23px !important;
  padding-bottom: 50px !important;
  .log-list-left {
    border-radius: 4px;
    width: 214px;
    // 设置内边距
    padding-left: 9px;
    /deep/ .customer-tree-box {
      .el-tree-node {
        margin: 5px 0 !important;
        .el-tree-node__children {
          margin: 2px 0 !important;
          .el-tree-node {
            .el-tree-node__children {
              margin: 2px 0 !important;
              .el-tree-node {
                .el-tree-node__content {
                  .el-tree-node__expand-icon {
                    display: none;
                  }
                  .el-tree-node__label {
                    margin-left: 0px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    width: 131px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .log-list-right {
    /deep/ .el-card__header {
      color: #2a2929;
      font-weight: bold;
      font-size: 16px;
    }
  }
  /deep/ .dashboard-container {
    min-height: 870px !important;
  }
  .el-tree {
    padding-left: 10px;
    margin-top: 5px;
    min-height: 870px !important;
  }

  /deep/.app-container {
    background-color: white;
  }
  .pagination {
    text-align: center;
    margin-top: 26px;
    padding-bottom: 40px;
  }
  /deep/ .el-card__body {
    padding: 0;
    padding-top: 10px;
    .app-container {
      padding: 0;
    }
  }

  .el-form--label-right {
    padding: 20px 0;
    width: 100% !important;
    padding-right: 37px;
  }

  /deep/ .el-tree-node__content {
    margin-right: 20px;
  }
}

.addEdit {
  background-color: #e05635;
  color: #fff;
  border-radius: 5px;
  &:hover {
    background-color: #e05635;
    color: #fff;
    border-color: #dcdfe6;
  }
}
.org {
  .app-container {
    margin: 0 0 10px 0 !important;
  }
}
.el-card {
  border-radius: 8px;
  border: none;
  .el-card__header {
    background: #f8faff;
    border-bottom: 0px solid #e6ebf5;
  }
}

.log-list {
  width: 100%;
  padding: 20px;
  padding-top: 0;
  .test {
    width: 100%;
    display: -webkit-box;
    // display: flex;
    /deep/ .el-row {
      width: 100%;
    }
    .log-list-right {
      flex: 1;
      // 新添加的
      margin-left: 20px;

      .log-list-right-table {
        min-height: calc(75vh - 0px);
      }
      /deep/ .el-card__header {
        background-color: #fafafa;
        // border-radius: 8px 8px 0 0;
      }
      /deep/ .el-card.is-always-shadow {
        border-radius: 4px !important;
        box-shadow: none;
      }
      /deep/ .el-select {
        width: 100%;
      }
      // 新添加的
      /deep/ .custom-theme .el-input.is-disabled .el-input__inner {
        background-color: #fafafa !important;
        color: red;
      }
    }
    .log-list-left,
    .log-list-right {
      height: 870px;

      background-color: #fff;
      border-radius: 4px;
      /deep/ .el-scrollbar {
        border-radius: 8px;
      }
    }
    .log-list-right {
      background-color: #f3f4f7;
    }
  }

  /deep/ .org-index {
    .el-card__body {
      // border-top: 1px solid #e5e7ec;
      // margin: 0px 60px;
      box-sizing: border-box !important;
      padding-top: 20px !important;
      padding: 0 28px;
      padding-bottom: 20px;
    }
  }
}
/deep/ .el-pager li.active {
  color: #e15536;
}
/deep/ .el-pagination__total {
  color: #20232a;
}
/deep/ .el-pagination button:hover {
  color: #e15536;
}
/deep/ .el-pagination__sizes .el-input .el-input__inner:hover {
  border-color: #e15536;
}
</style>
